
<template>
  <div class="formComponent">
    <component 
      :is='getCurModelComponent'
      :formItem="formItem"
    ></component>
  </div>
</template>

<script setup>

import { ref, computed, defineProps, markRaw } from "vue";
import Input from "@/views/form/manage/design/components/componentUI/Input.vue";
import Textarea from "@/views/form/manage/design/components/componentUI/Textarea.vue";
import Radio from "@/views/form/manage/design/components/componentUI/Radio.vue";
import Checkbox from "@/views/form/manage/design/components/componentUI/Checkbox.vue";
import SelectSingle from "@/views/form/manage/design/components/componentUI/SelectSingle.vue";
import SelectMultiple from "@/views/form/manage/design/components/componentUI/SelectMultiple.vue";
import Pagenation from "@/views/form/manage/design/components/componentUI/Pagenation.vue";
import FileUpload from "@/views/form/manage/design/components/componentUI/FileUpload.vue";
import ImgUpload from "@/views/form/manage/design/components/componentUI/ImgUpload.vue";
import Vote from "@/views/form/manage/design/components/componentUI/Vote.vue";
import BaseInfo from "@/views/form/manage/design/components/componentUI/BaseInfo.vue";
import Identity from "@/views/form/manage/design/components/componentUI/Identity.vue";
import Phone from "@/views/form/manage/design/components/componentUI/Phone.vue";
import Native from "@/views/form/manage/design/components/componentUI/Native.vue";
import SecondTitle from "@/views/form/manage/design/components/componentUI/SecondTitle.vue";
import DateCmp from "@/views/form/manage/design/components/componentUI/Date.vue";
const props = defineProps({
  formComponent: {
      type: Object,
  },
})
let formItem = computed(() => {
    return props.formComponent;
});
const componentsList = ref([
  { component: markRaw(Input), type: 'input' },
  { component: markRaw(Textarea), type: 'textarea' },
  { component: markRaw(Radio), type: 'radio' },
  { component: markRaw(Checkbox), type: 'checkbox' },
  { component: markRaw(SelectSingle), type: 'selectSingle' },
  { component: markRaw(SelectMultiple), type: 'selectMultiple' },
  { component: markRaw(Pagenation), type: 'pagenation' },
  { component: markRaw(FileUpload), type: 'fileUpload' },
  { component: markRaw(ImgUpload), type: 'imgUpload' },
  { component: markRaw(Vote), type: 'vote' },
  { component: markRaw(BaseInfo), type: 'baseInfo' },
  { component: markRaw(Identity), type: 'identity' },
  { component: markRaw(Phone), type: 'phone' },
  { component: markRaw(Native), type: 'native' },
  { component: markRaw(SecondTitle), type: 'secondTitle' },
  { component: markRaw(DateCmp), type: 'date' },
])
const getCurModelComponent = computed(()=>{
  return componentsList.value.find(item => item.type == formItem.value.type).component
})
setTimeout(() => {
  console.log('formItem', formItem.value);
  console.log('componentsList', componentsList.value);
  console.log('getCurModelComponent', getCurModelComponent.value);
  
}, 0);
</script>

<style lang="scss" scoped>
.formComponent{
  padding: 0 100px;
}
// 填写者回答区
.double-model-input-writer{
  ::v-deep(.el-input__inner){
    font-size: 14px;
  }
}

</style>
